import React, { useEffect, useState } from "react"
import { StyleSheet, Text, View, Image, TouchableWithoutFeedback, Dimensions, ImageBackground, TouchableHighlight, Modal, Alert, StatusBar } from 'react-native';
import { useDispatch } from "react-redux";
import { BIPSigner } from '@/models/BIPSigner'
import NavBar from '@/components/NavBar'
import { walletStandardProps } from '@/config/navigatorProps'

// 设备宽度，单位 dp
const deviceWidthDp = Dimensions.get('window').width;
// 设计稿宽度（这里为640px），单位 px
const uiWidthPx = 375;
const pTd = (uiElePx) => {
    return uiElePx * deviceWidthDp / uiWidthPx;
}
const signer = new BIPSigner()

const CreateGenerate = ({ navigation }) => {

    const dispatch = useDispatch();
    const [mnemonic, setmnemonic] = useState([])
    const [modalVisible, setModalVisible] = useState(true);
    const [modalVisibles, setModalVisibles] = useState(false);

    useEffect(() => {
        let str = signer.generateMnemonic()
        dispatch({ type: "setMnemonicStr", value: str });
        let list = str.split(" ")
        setmnemonic(list)
    }, [])

    useEffect(() => {
        if (mnemonic.length > 0) {
        }
    }, [mnemonic])

    const next = () => {
        setModalVisibles(false)
    }

    const nextpage = async () => {
        navigation.navigate("create-copy")
    }

    const iknow = () => {
        setModalVisible(false)
        setModalVisibles(true)
    }

    return (
        <View style={styles.container}>
            <StatusBar backgroundColor='#5A72EC' barStyle='light-content' />
            <NavBar {...walletStandardProps} />
            <View><Text style={styles.title}>Backup mnemoic correctly</Text></View>
            <View style={{ marginTop: pTd(10) }}>
                <Text style={styles.text}>Once mnemonic words are lost, assets will not be recovered!</Text>
                <Text style={styles.text}>No Screenshots!</Text>
            </View>
            <View>
                <View style={{ marginTop: 40 }}>
                    <View style={styles.box}>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[0]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[1]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[2]}</Text>
                        </View>
                    </View>
                    <View style={styles.box}>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[3]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[4]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[5]}</Text>
                        </View>
                    </View>
                    <View style={styles.box}>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[6]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[7]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[8]}</Text>
                        </View>
                    </View>
                    <View style={styles.box}>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[9]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[10]}</Text>
                        </View>
                        <View style={styles.wordbox}>
                            <Text style={styles.wordboxtext}>{mnemonic[11]}</Text>
                        </View>
                    </View>
                </View>
            </View>
            <View style={styles.wordboxbutton}>
                <TouchableHighlight style={styles.button} underlayColor='#5662EA' onPress={nextpage} >
                    <Text style={{ fontSize: pTd(16), color: "#5A8EBE", textAlign: "center", lineHeight: pTd(44) }}>I have copied it to verify</Text>
                </TouchableHighlight >
            </View>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisible}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setModalVisible(!modalVisible);
                }}
            >
                <View style={styles.mdcontainer}>
                    <ImageBackground source={require("@/assets/imgs/popup_bgc.png")} style={{ height: pTd(360), width: pTd(350) }}>
                        <View style={styles.poup_top}>
                            <Image source={require("@/assets/imgs/bgc_icon.png")} style={{ height: pTd(87), width: pTd(87) }}></Image>
                            <Text style={{ fontSize: 21, color: "#000" }}>Do not reveal mnemonics</Text>
                        </View>
                        <View style={styles.poup_bottom}>
                            <View style={styles.poup_bottom_index}>
                                <Text style={styles.bottom_txt}>
                                    1.Not to<Text style={styles.inner_text}>【anybody】</Text>disclose mnemonics or your assets will be lost
                                </Text>
                                <Text style={styles.bottom_txt}>
                                    2.All titles<Text style={styles.inner_text}> risk control department of the exchange </Text>
                                    phone calls are all liars
                                </Text>
                                <Text style={styles.bottom_txt}>
                                    3.All to you{' '}
                                    <Text style={styles.inner_text}>
                                        ask for mnemonics
                                    </Text>
                                    {' '}people and websites are liars
                                </Text>
                            </View>
                            <View>
                                <TouchableWithoutFeedback onPress={iknow}>
                                    <Text style={styles.button_text}>I got it!</Text>
                                </TouchableWithoutFeedback>
                            </View>
                        </View>
                    </ImageBackground>
                </View>
            </Modal>
            <Modal
                animationType="slide"
                transparent={true}
                visible={modalVisibles}
                onRequestClose={() => {
                    Alert.alert("Modal has been closed.");
                    setModalVisibles(!modalVisibles);
                }}
            >
                <View style={styles.mdcontainer}>
                    <View style={styles.jp_poup}>
                        <View style={styles.jp_poup_top}></View>
                        <Image source={require("@/assets/imgs/jz.png")} style={{ height: 81, width: 81 }}></Image>
                        <Text style={{ fontSize: 20, color: "#646464" }}>No Screenshots!</Text>
                        <Text style={{ fontSize: 12, color: "#FF6600", marginTop: 17 }}>
                            Please do not share and store screenshots, which may be collected by third-party malware and cause asset loss
                        </Text>
                        <TouchableHighlight style={styles.buttons} underlayColor='#ddd' onPress={next}>
                            <Text style={{ fontSize: pTd(16), color: "#fff", textAlign: "center", lineHeight: pTd(44) }}>I got it!</Text>
                        </TouchableHighlight >
                    </View>
                </View>
            </Modal>
        </View>
    )
}
const styles = StyleSheet.create({
    container: {
        flex: 1,
        position: "relative",
        backgroundColor: "#FFFFFF"
    },
    title: {
        fontSize: pTd(23),
        color: "#262626",
        textAlign: "center",
        marginTop: pTd(30)
    },
    text: {
        fontSize: pTd(17),
        color: "#DC3333",
        textAlign: "center"
    },
    wordbox: {
        height: pTd(39),
        width: pTd(98),
        borderColor: "#D3D3D3",
        borderRadius: 3,
        borderWidth: 1,
        alignItems: "center",
        justifyContent: "center",

    },
    box: {
        flexDirection: "row",
        width: "100%",
        paddingLeft: 30,
        paddingRight: 30,
        justifyContent: "space-between",
        marginTop: 10
    },
    wordboxtext: {
        color: "#3A7DCA"
    },
    wordboxbutton: {
        width: "100%",
        paddingLeft: 30,
        paddingRight: 30,
        position: "absolute",
        bottom: pTd(35)
    },
    button: {
        width: "100%",
        height: pTd(44),
        borderColor: "#D1D1D1",
        borderWidth: 1,
        backgroundColor: "#fff"
    },
    mdcontainer: {
        flex: 1,
        backgroundColor: "rgba(0, 0, 0, 0.09)",
        alignItems: "center",
        justifyContent: "center"
    },
    poup_top: {
        height: pTd(150),
        width: "100%",
        alignItems: 'center',
        justifyContent: "center"
    },
    poup_bottom: {
        height: pTd(160),
        width: "100%",
        paddingLeft: 32,
        paddingRight: 32,
        paddingTop: pTd(12)
    },
    bottom_txt: {
        fontSize: pTd(12),
        color: "#565656",
        lineHeight: pTd(24)
    },
    inner_text: {
        fontSize: pTd(12),
        color: "#FF0000"
    },
    poup_bottom_index: {
        width: "100%",
        marginTop: pTd(12),
        borderBottomColor: "#F1F1F1",
        borderBottomWidth: 1
    },
    button_text: {
        fontSize: pTd(12),
        color: "#000000",
        justifyContent: "center",
        alignItems: "center",
        lineHeight: pTd(42),
        flexDirection: "row",
        textAlign: "center"
    },
    jp_poup: {
        width: "100%",
        height: pTd(285),
        backgroundColor: "#ffffff",
        position: "absolute",
        bottom: 0,
        paddingLeft: pTd(15),
        paddingRight: pTd(15),
        alignItems: "center"
    },
    jp_poup_top: {
        height: pTd(43),
        width: "100%",
        borderBottomColor: "#707070",
        borderBottomWidth: 1,
    },
    buttons: {
        width: "100%",
        height: pTd(44),
        backgroundColor: "#5662EA",
        borderRadius: 5,
        marginTop: 18,
        width: 252
    }

})
export default CreateGenerate